<template>
  <div>
    <button @click="clickHadler">显示/隐藏</button>
    <div>
      <transition
       enter-active-class="animate__animated animate__rubberBand"
       leave-active-class="animate__animated animate__backInRight">
       <div v-if="show" class="block">hello wolrd</div>
    </transition>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'hello',
      show: true
    }
  },
  methods: {
    clickHadler () {
      this.show = !this.show
    }
  }
}
</script>
<style scoped>

/* .why-enter-active {
  animation: backInDown 1s ease;
}
.why-leave-active {
  animation: backInDown 1s ease reverse;
} */
.block {
  display: inline-block;
}
</style>
